<template>
  <MrCustom bg-color="bg-gradual-blue " is-back>
    <template #backText>
      返回
    </template>
  </MrCustom>
  <uni-forms ref="formRef" :model-value="formData" :rules="rules">
    <uni-forms-item name="pipelineUnobstructed">
      <view class="cu-form-group">
        <view class="title">管路是否通畅</view>
        <view>
          <radio-group class="block" @change="pipelineUnobstructedChange">
            <label>
              <radio class='green radio' :class="formData.pipelineUnobstructed==='否'?'checked':''"
                     :checked="formData.pipelineUnobstructed==='否'" value="否"></radio>
              否
            </label>
            <label>
              <radio class='red margin-left-sm' :class="formData.pipelineUnobstructed==='是'?'checked':''"
                     :checked="formData.pipelineUnobstructed==='是'" value="是"></radio>
              是
            </label>
          </radio-group>
        </view>
      </view>
    </uni-forms-item>
    <uni-forms-item name="changeDressing">
      <view class="cu-form-group">
        <view class="title">是否更换敷料</view>
        <view>
          <radio-group class="block" @change="changeDressingChange">
            <label>
              <radio class='green radio' :class="formData.changeDressing==='否'?'checked':''"
                     :checked="formData.changeDressing==='否'" value="否"></radio>
              否
            </label>
            <label>
              <radio class='red margin-left-sm' :class="formData.changeDressing==='是'?'checked':''"
                     :checked="formData.changeDressing==='是'" value="是"></radio>
              是
            </label>
          </radio-group>
        </view>
      </view>
    </uni-forms-item>
    <uni-forms-item name="replaceConnector">
      <view class="cu-form-group">
        <view class="title">是否更换接头</view>
        <view>
          <radio-group class="block" @change="replaceConnectorChange">
            <label>
              <radio class='green radio' :class="formData.replaceConnector==='否'?'checked':''"
                     :checked="formData.replaceConnector==='否'" value="否"></radio>
              否
            </label>
            <label>
              <radio class='red margin-left-sm' :class="formData.replaceConnector==='是'?'checked':''"
                     :checked="formData.replaceConnector==='是'" value="是"></radio>
              是
            </label>
          </radio-group>
        </view>
      </view>
    </uni-forms-item>
    <uni-forms-item name="resistance">
      <view class="cu-form-group">
        <view class="title">有无阻力</view>
        <view>
          <radio-group class="block" @change="resistanceChange">
            <label>
              <radio class='green radio' :class="formData.resistance==='否'?'checked':''"
                     :checked="formData.resistance==='否'" value="否"></radio>
              否
            </label>
            <label>
              <radio class='red margin-left-sm' :class="formData.resistance==='是'?'checked':''"
                     :checked="formData.resistance==='是'" value="是"></radio>
              是
            </label>
          </radio-group>
        </view>
      </view>
    </uni-forms-item>
    <uni-forms-item name="companion">
      <view class="cu-form-group">
        <view class="title">有无并发症</view>
        <view>
          <radio-group class="block" @change="companionChange">
            <label>
              <radio class='green radio' :class="formData.companion==='否'?'checked':''"
                     :checked="formData.companion==='否'" value="否"></radio>
              否
            </label>
            <label>
              <radio class='red margin-left-sm' :class="formData.companion==='是'?'checked':''"
                     :checked="formData.companion==='是'" value="是"></radio>
              是
            </label>
          </radio-group>
        </view>
      </view>
    </uni-forms-item>
    <uni-forms-item name="bloodReturn">
      <view class="cu-form-group">
        <view class="title">是否有回血</view>
        <view>
          <radio-group class="block" @change="bloodReturnChange">
            <label>
              <radio class='green radio' :class="formData.bloodReturn==='否'?'checked':''"
                     :checked="formData.bloodReturn==='否'" value="否"></radio>
              否
            </label>
            <label>
              <radio class='red margin-left-sm' :class="formData.bloodReturn==='是'?'checked':''"
                     :checked="formData.bloodReturn==='是'" value="是"></radio>
              是
            </label>
          </radio-group>
        </view>
      </view>
    </uni-forms-item>
    <uni-forms-item name="catheterExposedLength">
      <view class="cu-form-group">
        <view class="title">置管暴露长度</view>
        <input v-model="formData.catheterExposedLength" placeholder="请输入导管暴露长度" name="input"/>
        <view>cm</view>
      </view>
    </uni-forms-item>
    <uni-forms-item name="images">
      <view class="cu-form-group">
        <view class="grid col-4 grid-square flex-sub">
          <view class="bg-img" v-for="(item,index) in formData.images" :key="index" @tap="viewImage"
                :data-url="prefix+formData.images[index]">
            <MrImage :src="formData.images[index]"></MrImage>
            <view class="cu-tag bg-red" @tap.stop="delImage" :data-index="index">
              <text class='cuIcon-close'></text>
            </view>
          </view>
          <view class="solids" @tap="chooseImage" v-if="formData.images.length<4">
            <text class='cuIcon-cameraadd'></text>
          </view>
          <view v-if="formData.images.length===0" style="width: 65vw">
            <text>上传图片（检查单、CT、就诊过程图）</text>
          </view>
        </view>
      </view>
    </uni-forms-item>
  </uni-forms>
  <view class="flex flex-direction margin-bottom-xl">
    <button class="cu-btn bg-blue lg" @click="handle">提交</button>
  </view>

</template>

<script setup lang="ts">

import {defineEmits, ref} from "vue";
import UniFormsItem from "@/uni_modules/uni-forms/components/uni-forms-item/uni-forms-item.vue";
import {uploadFile,imagePathPrefix} from '/settings'
import MrImage from "@/components/common/MrImage.vue";
import MrCustom from "@/components/common/MrCustom.vue";
const url = uploadFile.url
const name =uploadFile.name
const prefix =imagePathPrefix

const formRef = ref()
const formData = ref({
  pipelineUnobstructed: '',  //管路是否通畅
  changeDressing: '',   //是否更换敷料
  replaceConnector: '',  //是否更换接头
  resistance: '',  //有无阻力
  companion: '', //并发症
  bloodReturn: '', //是否有回血
  catheterExposedLength: 0,// 导管外露长度
  images:[],
})
const rules = ref()
const emits = defineEmits(['onHandle'])
const handle = () => {
  console.log(formData.value)
  uni.showModal({
    title: '提示',
    content: '确认提交？',
    success: function (res) {
      if (res.confirm) {
        emits('onHandle',formData.value)
      } else if (res.cancel) {
        console.log('用户点击取消');
      }
    }
  });
}

const viewImage = (e: any) => {
  let tmp =JSON.parse(JSON.stringify(formData.value.images))
  Object.keys(tmp).forEach(key=>{
    tmp[key]= prefix+tmp[key]
  })
  uni.previewImage({
    urls: tmp,
    current: e.currentTarget.dataset.url
  });
}
const delImage = (e: any) => {
  uni.showModal({
    title: '提示',
    content: '确定要删除这张图片吗？',
    cancelText: '取消',
    confirmText: '确认',
    success: res => {
      if (res.confirm) {
        formData.value.images.splice(e.currentTarget.dataset.index, 1)
      }
    }
  })
}
const chooseImage = () => {
  uni.chooseImage({
    count: 4, //默认9
    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album'], //从相册选择
    success: (res) => {
      uni.uploadFile({
        url: url,
        filePath: res.tempFilePaths[0],
        name:name,
        success: (uploadFileRes) => {
          let tmp = JSON.parse(uploadFileRes.data).data
          if (formData.value.images.length != 0) {
            formData.value.images = formData.value.images.concat(tmp)
          } else {
            formData.value.images = [tmp]
          }
        }
      });
    }
  });
}


const pipelineUnobstructedChange = (e: any) => {
  formData.value.pipelineUnobstructed = e.detail.value
}
const changeDressingChange = (e: any) => {
  formData.value.changeDressing = e.detail.value
}
const replaceConnectorChange = (e: any) => {
  formData.value.replaceConnector = e.detail.value
}
const resistanceChange = (e: any) => {
  formData.value.resistance = e.detail.value
}
const companionChange = (e: any) => {
  formData.value.companion = e.detail.value
}
const bloodReturnChange = (e: any) => {
  formData.value.bloodReturn = e.detail.value
}
</script>

<style scoped>
.cu-form-group .title {
  min-width: calc(4em + 15px);
}
</style>